<template>
    <view class="orderDetial">
        <myTips></myTips>
        <view class="card">
            <view class="card_head flex_b">
                <view class="card_head_l">预约订单</view>
                <view class="card_head_r">距您{{ distanceValue }}</view>
            </view>
            <view class="card_content">
                <view class="row flex_l">
                    <view class="img flex_c">
                        <image src="@/static/images/customerPage/icon_time.png" />
                    </view>
                    <view style="color: #222222;">{{ (orderDetail.workDate) }}</view>
                </view>
                <view class="row flex_l" style="margin-top: 20rpx;" @click="openMap">
                    <view class="img flex_c">
                        <image src="@/static/images/workerPage/navigation.png" />
                    </view>
                    <view style="color: #222222;font-size: 30rpx;font-weight: 700;">{{ orderDetail.workPlace }} {{
                        orderDetail.address }}</view>
                </view>
            </view>
            <view class="card_foot flex_b">
                <view class="card_foot_l">客户报价</view>
                <view class="card_foot_r">
                    <text class="t1">大约</text>
                    <text class="t2">¥{{ orderDetail.workMoney }}</text>
                </view>
            </view>
        </view>
        <view class="card">
            <view class="card_head flex_b">
                <view class="card_head_l">订单介绍</view>
            </view>
            <view class="card_content">
                <view class="item flex_b">
                    <view class="label">内容介绍：</view>
                    <view class="value">{{ orderDetail.introduction }}</view>
                </view>
                <view class="item flex_b mt24">
                    <view class="label">付费模式：</view>
                    <view class="value">
                        <text style="color: #FE6E04;font-size: 28rpx;font-weight: 700;">{{ orderDetail.feeType ==
                            1 ? '一口价' : '计件' }}</text>
                    </view>
                </view>
                <view class="item flex_b mt24">
                    <view class="label">{{ `需要${orderDetail.feeType == 1 ? '人' : '件' }数：` }}</view>
                    <view class="value" style="color: #FE6E04;font-weight: 700;">{{ `${orderDetail.peopleNum}${orderDetail.feeType == 1 ? '人' : '件'}` }}</view>
                </view>
                <view class="item flex_b mt24">
                    <view class="label">订单备注：</view>
                    <view class="value">{{ orderDetail.orderDsg }}</view>
                </view>
            </view>
        </view>
        <!-- 用工图片 -->
        <view class="card">
            <view class="card_head flex_b">
                <view class="card_head_l">用工图片</view>
            </view>
            <view class="card_content">
                <myUploadImg :imgList="workImgList" disabled preview></myUploadImg>
            </view>
        </view>
        <view class="tips">
            <text style="color: red;">*</text>接单后，请按照预约时间到达干活现场，进入订单，打卡签到。
        </view>
        <!-- 接单提示 -->
        <up-modal showCancelButton :show="showModal" title="接单提示" @confirm="confirm" @cancel="showModal = false">
            <view>接单后请及时联系客户确认订单信息!</view>
        </up-modal>
        <view class="bottom_btn" v-if="orderDetail.status == 1 && isLogin">
            <view class="btn flex_c" @click="submit">立即接单</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { computed, provide, ref, watchEffect } from "vue";
import myTips from "@/components/my-tips/my-tips.vue";
import myUploadImg from '@/components/my-uploadImg/my-uploadImg.vue';
import { makeOrder } from "@/api/workerPage/order";
import { useOrder } from "@/hooks/useOrder";
import { useMemberStore } from '@/stores'
import { useMap } from '@/hooks/useMap';
import { storeToRefs } from "pinia";
const useMember = useMemberStore()
const { userInfo, memberInfo, isLogin, checkMemberMpResult } = storeToRefs(useMember)
provide("checkMemberMpResult", checkMemberMpResult)

// 查询订单详情
const { orderDetail, getWorkerOrderInfo } = useOrder();
const workImgList = ref<string[]>([])
const id = ref("")
onLoad((options: any) => {
    if (options.id) {
        id.value = options.id
        // 查询订单详情
        getWorkerOrderInfo(id.value)
        // 检查是否关注公众号
        useMember.checkMemberMpRes()
    }
})
watchEffect(() => {
    // 用工图片
    if (orderDetail.value.customerImages) {
        workImgList.value = orderDetail.value.customerImages.split(",")
    }
    // 计算距离
    if (orderDetail.value.lat) {
        calcDistance()
    }
})
// 计算距离
const distance = ref(0)
const distanceValue = computed(() => {
    // 如果distance小于1000 返回米 大于1000返回公里 保留2位小数
    return distance.value < 1000 ? distance.value + " 米" : (distance.value / 1000).toFixed(2) + " 公里"
})
const calcDistance = async () => {
    const { getLocation, handlerGetDistance } = useMap()
    const location: any = await getLocation()
    const res = await handlerGetDistance([location.latitude, location.longitude], [orderDetail.value.lat, orderDetail.value.lng])
    distance.value = res.rows[0].elements[0].distance ?? 0
}

// 确定接单
const showModal = ref(false)
const submit = () => {
    if (!checkMemberMpResult.value) {
        uni.showToast({ title: "关注公众号后才能接单", icon: "none" })
        return
    }
    showModal.value = true
}
const confirm = async () => {
    const res: any = await makeOrder({
        id: id.value,
        workUserId: userInfo.value.userId,
        workerMobile: memberInfo.value.userMobile,
        workerName: memberInfo.value.nickname
    })
    if (res.code == 0 && res.data) {
        uni.showToast({ title: "接单成功" })
        uni.setStorageSync('loadData', 'makeOrder')
        setTimeout(() => {
            uni.switchTab({ url: '/pages/tabbar/workerOrder/workerOrder' })
        }, 500)
    }else{
        uni.showToast({ title: "这个订单已被抢了,看看其他的吧~", icon: "none" })
        uni.setStorageSync('loadData', true)
        setTimeout(() => {
            uni.switchTab({ url: '/pages/tabbar/workerOrder/workerOrder' })
        }, 500)
    }
    showModal.value = true
}
// 打开地图
const openMap = () => {
    uni.openLocation({
        type: 'gcj02',
        latitude: Number(orderDetail.value?.lat),
        longitude: Number(orderDetail.value?.lng)
    })
}
</script>

<style lang="scss" scoped>
.orderDetial {
    min-height: 100vh;
    overflow: hidden;
    background: #f8f8f8;
}

.card {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 24rpx;
}

.card_head {
    height: 94rpx;
    border-bottom: 2rpx solid #F8F8F8;

    &_l {
        font-weight: 600;
        font-size: 30rpx;
        color: #222222;
    }

    &_r {
        font-size: 28rpx;
        color: #FB2A2C;
    }
}

.card_content {
    padding: 24rpx 0;

    .row {
        width: 100%;
        height: 46rpx;
        font-size: 28rpx;

        .img {
            width: 28rpx;
            height: 100%;
            margin-right: 20rpx;

            image {
                width: 28rpx;
                height: 28rpx;
            }
        }
    }
}

.card_foot {
    height: 98rpx;
    border-top: 2rpx solid #F8F8F8;

    &_l {
        font-weight: 700;
        font-size: 30rpx;
        color: #222222;
    }

    &_r {
        height: 98rpx;
        line-height: 46rpx;
        display: flex;
        align-items: center;

        .t1 {
            font-size: 26rpx;
            color: #FF382E;
            margin-right: 12rpx;
        }

        .t2 {
            font-weight: 700;
            font-size: 40rpx;
            color: #FF382E;
        }
    }
}

.item {
    width: 100%;
    align-items: flex-start;

    .label {
        width: 140rpx;
        height: 46rpx;
        font-weight: 600;
        font-size: 28rpx;
        color: #222222;
        margin-right: 10rpx;
    }

    .value {
        width: 500rpx;
        font-size: 28rpx;
        color: #222222;
        line-height: 46rpx;
    }
}

.bottom_btn {
    width: 750rpx;
    height: 198rpx;
    background: #ffffff;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;

    .btn {
        width: 650rpx;
        height: 80rpx;
        background: #FE6E04;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        font-weight: 700;
        font-size: 32rpx;
        color: #FFFFFF;
        margin: 0 auto;
        margin-top: 36rpx;
    }
}

.tips {
    font-size: 24rpx;
    color: #999999;
    margin: 24rpx;
}
</style>